<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/layui.css" th:href="@{/css/layui.css}" />
    <link
      rel="stylesheet"
      href="/css/bootstrap.min.css"
      th:href="@{/css/bootstrap.min.css}"
    />
    <link
      rel="stylesheet"
      href="/css/breakdown.css"
      th:href="@{/css/breakdown.css}"
    />
    <script src="/js/jquery.min.js" th:href="@{/js/jquery.min.js}"></script>
  </head>
  <style>
    .layui-tree-entry {
      height: 30px;
    }
    .layui-icon-delete:before {
      display: none;
    }
    .gw_b_item2 {
      display: block;
    }
    #noneBox {
      width: 333px;
      height: 200px;
      display: none;
      background-color: #fff;
      z-index: 100;
      border-radius: 10px;
      position: relative;
    }
    .layui-table-body tr {
      position: relative;
    }
    .tip_box .tip_text {
      position: absolute;
      left: -50%;
      top: calc(100% + 12px);
      width: max-content;
      font-size: 12px;
      font-weight: 400;
      word-break: break-word;
      padding: 6px 8px;
      border-radius: 4px;
      z-index: 99999;
      background: #fff;
      border: 1px solid #303133;
      color: #303133;
    }
    .tip_box .tip_text:after {
      content: "";
      position: absolute;
      top: -8px;
      left: 22px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 8px 8px;
      border-color: transparent transparent #303133;
    }
    #noneBox ::after {
      content: "";
      position: absolute;
      top: -8px;
      left: 50%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 8px 8px;
      border-color: transparent transparent #303133;
    }
    #newBox {
      width: 333px;
      height: 200px;
      display: none;
      background-color: black;
      z-index: 100;
      border-radius: 10px;
    }
    #newBox ::after {
      content: "";
      position: absolute;
      top: -8px;
      left: 50%;
      width: 0;
      height: 0;
      border-top: 10px solid black;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    .alertText {
      position: absolute;
      display: block;
      top: -48px !important;
      right: 16px !important;
      width: max-content;
      font-size: 12px;
      font-weight: 400;
      word-break: break-word;
      padding: 6px 8px;
      border-radius: 4px;
      z-index: 100005;
      background: #fff;
      border: 1px solid #303133;
      color: #303133;
    }
    .alertText .tip_text:after {
      content: "";
      position: absolute;
      top: 33px;
      left: 5px;
      width: 0;
      height: 0;
      border-top: 10px solid black;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    .clickColor {
      color: #1c92ec;
    }
  </style>
  <body>
    <div class="main">
      <div class="treebox">
        <div id="leftTree"></div>
        <div></div>
      </div>
      <div class="tablebox">
        <div class="table">
          <table
            id="bootstrap-table"
            class="table table-bordered table-hover"
          ></table>
        </div>
      </div>
    </div>
    <div class="tip_box">
      <div class="tip_text">暂无数据</div>
    </div>
    <div id="noneBox"></div>
    <div id="newBox"></div>

    <!-- <div id="isShow">
        <div class="tip_text">暂无数据</div>
    </div> -->
  </body>
  <!-- <script src="../static/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.exedit-3.5.js"></script>
<script src="../static/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script> -->
  <!-- <script src="../static/ajax/libs/layui/layui.min.js"></script> -->
  <script src="/js/layui.js" th:src="@{/js/layui.js}"></script>
  <script src="/js/echarts.js" th:src="@{/js/echarts.js}"></script>
  <!-- <script src="/js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script> -->

  <script>
    // 渲染树
    $(function () {
      // var initTreeId = ''
      var loading = layer.load(); // 加载中
      // 渲染树组件
      renderTree();
      // $.ajax({
      //     url:`/youtian/scene-category/selectSourceTagHistoryListBySourceTag`,
      //     type:"get",
      //     data:{
      //         // sourceTag:treeId[i].sourceTag,
      //         // ZB060101CYQCKOTP
      //         sourceTag:'ZB060101YGJM01LEV',
      //         params:{
      //             beginTime:'',
      //             endTime:''
      //         }
      //     },
      //     success:function(res){
      //         console.log(res,'rrrrrrrrrrrr')
      //     }
      // })
    });
    var treeId = [];
    var obj = {};
    function debounce(fn, delay) {
      //设置time为定时器
      //闭包原理，返回一个函数
      // obj[arg[0]].tim
      // console.log(fn,delay);
      // return function (e){
      //     //如果定时器存在则清空定时器
      //     console.log(time,'yyyyyyyyyy');
      //     if(time){
      //         console.log(time,'innnnnnnnnn');
      //         clearTimeout(time);
      //     }
      //     //设置定时器，规定时间后执行真实要执行的函数
      //     time = setTimeout(() => {//此箭头函数里的this指向btn这个按钮
      //         fn(this,arguments);//改变真实要执行函数的this指向，原submit函数里面的this指向window
      //     },delay);
      // }
      // console.log(arguments[0],'进来了');
      return function (e) {
        //如果定时器存在则清空定时器
        // console.log(arguments[0],'yyyyyyyyyy');
        if (arguments[0].time) {
          clearTimeout(arguments[0].time);
        }
        //设置定时器，规定时间后执行真实要执行的函数
        arguments[0].time = setTimeout(() => {
          //此箭头函数里的this指向btn这个按钮
          fn(this, arguments); //改变真实要执行函数的this指向，原submit函数里面的this指向window
        }, delay);
      };
    }
    // 渲染树组件
    function renderTree() {
      layui.use("tree", function () {
        var treeCkData = { id: 0 };
        var tree = layui.tree;
        $.ajax({
          url: "/youtian/scene-category/tree",
          type: "get",
          success: function (res) {
            $.ajax({
              url: `/youtian/workspace-category/getPointList`,
              type: "get",
              data: {
                workspaceCategoryId: res.data[0].id + "",
                pageNum: 10,
                pageSize: 100,
              },
              success: function (res) {
                treeId = res.rows;
                tableList(res);
              },
            });
            tree.render({
              elem: "#leftTree", //绑定元素
              data: res.data,
              showLine: false,
              click: function (obj) {
                treeData = obj.data;
                if (obj.data.id !== treeCkData.id) {
                  // 点击左侧工作树高亮显示
                  $('div[data-id="' + obj.data.id + '"] span')
                    .eq(1)
                    .last()
                    .addClass("clickColor");
                  $('div[data-id="' + treeCkData.id + '"] span')
                    .eq(1)
                    .last()
                    .removeClass("clickColor");
                  treeCkData = obj.data;
                }
                $.ajax({
                  url: `/youtian/workspace-category/getPointList`,
                  data: {
                    workspaceCategoryId: obj.data.id,
                    pageNum: 10,
                    pageSize: 100,
                  },
                  type: "get",
                  success: function (res) {
                    treeId = res;
                    tableList(res);
                  },
                });
              },
            });
          },
        });
      });
    }
    // 渲染table
    function tableList(res) {
      let tableData = res.rows ? res.rows : res;
      layui.use("table", function () {
        var table = layui.table;
        table.render({
          elem: "#bootstrap-table",
          autoSort: true,
          initSort: {
            field: "sceneName",
            type: "desc",
          },
          height: 500,
          limit: 1000, // 默认显示几条数据
          text: {
            none: "暂无相关数据", //默认：无数据。
          },
          done: function (data) {
            // 渲染完数据之后执行。
            $(".tablebox .layui-table").rowspan(0); //合并第一列中相同的行
          },
          cols: [
            [
              //表头
              // {field: 'id', title: '序号', width:'10%', sort: false, unresize:true, align:'center'},
              {
                field: "sceneName",
                title: "场景名称",
                unresize: true,
                align: "center",
              },
              {
                field: "upperLimit",
                title: "上限值",
                width: 120,
                unresize: true,
                align: "center",
              },
              {
                field: "lowerLimit",
                title: "下限制",
                width: 120,
                unresize: true,
                align: "center",
              },
              {
                field: "pointName",
                title: "监测点名称",
                unresize: true,
                align: "center",
              },
              {
                field: "value",
                title: "检测数据",
                unresize: true,
                align: "center"
              },
              {
                field: "dataState",
                title: "报警状态",
                sort: false,
                unresize: true,
                align: "center",
              },
              //   {
              //     field: "impact",
              //     title: "影响因数",
              //     width: "15%",
              //     unresize: true,
              //     align: "center",
              //   },
              //   {
              //     field: "setFactor",
              //     title: "因数设置",
              //     width: "16%",
              //     sort: false,
              //     unresize: true,
              //     align: "center",
              //   },

              //   {
              //     field: "set",
              //     title: "操作",
              //     templet: "#toolEventDemo",
              //     sort: false,
              //     unresize: true,
              //     align: "center",
              //   },
            ],
          ],
          data: tableData,
        });
      });
    }
    // 补零函数，小于10的时候，数字前面补0，例如： 9=》09 ;
    function fillZero(num=0){
      if( typeof num == "undefined" || !Number(num) ){
        num = 0;
      }
      return num<10?"0"+num:num;
    }
    // 获取当前
    function nowDate() {
      let date = new Date();
      //对获取的时间进行格式处理
      //获取年份 并拼接 -
      // var Y = date.getFullYear() + "-";
      var YY = date.getFullYear();
      //获取月份，如果不超过10就在前面拼接上0，这样看着比较美观统一
      // var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) + "-" : date.getMonth() + 1 + "-";
      var MM = fillZero(date.getMonth() + 1);
      //获取天数
      // var D = date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
      var DD = fillZero(date.getDate() );
      //获取小时
      // var h = date.getHours() < 10 ? "0" + date.getHours() + ":" : date.getHours() + ":";
      var hh = fillZero( date.getHours() );
      //获取分钟数
      // var m = date.getMinutes() < 10  ? "0" + date.getMinutes() + ":" : date.getMinutes() + ":";
      var mm = fillZero( date.getMinutes() );
      //获取秒速
      // var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var ss = fillZero( date.getSeconds() );

      // return Y + M + D + h + m + s;
      return `${YY}-${MM}-${DD} ${hh}:${mm}:${ss}`;
    }
    // 获取前一天
    function prevDate() {
      var curDate = new Date();
      var nowDate = curDate.getTime();
      var preDate = new Date(curDate.getTime() - 24 * 60 * 60); //前一天
      var Y = preDate.getFullYear() + "-";
      //获取月份
      var M =
        preDate.getMonth() + 1 < 10
          ? "0" + (preDate.getMonth() + 1) + "-"
          : preDate.getMonth() + 1 + "-";
      //获取天数
      var D =
        preDate.getDate() < 10
          ? "0" + preDate.getDate() + " "
          : preDate.getDate() + " ";
      //获取小时
      var h =
        preDate.getHours() < 10
          ? "0" + preDate.getHours() + ":"
          : preDate.getHours() + ":";
      //获取分钟数
      var m =
        preDate.getMinutes() < 10
          ? "0" + preDate.getMinutes() + ":"
          : preDate.getMinutes() + ":";
      //获取秒速
      var s =
        preDate.getSeconds() < 10
          ? "0" + preDate.getSeconds()
          : preDate.getSeconds();

      return Y + M + D + h + m + s;
    }
    let ss = prevDate();
    console.log(ss, "ss");

    /***
     * 1.添加定时器隔xxx时间请求接口一次，需要清空之前存放数据数组
     * 2.添加防抖
     * 3.没有数据提示弹框
     *
     *
     */
    $(".table").on("click", ".layui-table-body .layui-table-cell", function () {
      console.log(treeId, "treeId.rows");
      var upLimits = $(this)
        .parent()
        .prev()
        .children(".layui-table-cell")
        .html();
      var upLimit = parseInt(upLimits);
      var lowlimits = $(this).html();
      var lowlimit = parseInt(lowlimits);
      console.log(upLimit, lowlimit, "lowlimit");
      if ($(this).parent("td").attr("data-field") === "lowerLimit") {
        for (let i = 0; i < treeId.length; i++) {
          if (i == $(this).parent("td").parent("tr")[0].dataset.index) {
            $(this).parent("td").attr("pointId", treeId[i].pointId);
            console.log(
              $(this).parent("td").attr("pointId"),
              "......................"
            );
          }
        }
        createEchar(
          $(this).parent("td"),
          $(this).parent("td").parent("tr")[0].dataset.index,
          upLimit,
          lowlimit
        );
      }
    });
    var setTimeData = "";
    var setTimeFlag = false;
    function createEchar(td, tr, upLimit, lowlimit) {
      console.log(td.attr("pointId"), "tdddddddddddddd");
      let list = {
        sourceTag: td.attr("pointId"),
        params: {
          beginTime: "",
          endTime: "",
        },
      };
      $.ajax({
        url: `/youtian/scene-category/selectSourceTagHistoryListBySourceTag`,
        type: "post",
        dataType: "json",
        data: JSON.stringify(list),
        headers: { "Content-Type": "application/json" },
        success: function (res) {
          console.log(res, "res请求接口");
          setTimeFlag = true;
          console.log("鼠标移入第一次触发");
          if (res.data && res.data.length) {
            // res.rows.filter(item =>{
            //     return item.
            // })
            console.log(tr, "tr");
            var poistionTop = "33px";
            var echartsClassName = "";
            // if (tr <= "5") {
            //   poistionTop = "40px";
            //   echartsClassName = "#noneBox";
            //   // isShowEcharts = 'block'
            // } else if (tr == "6") {
            //   poistionTop = "-314px";
            //   echartsClassName = "#newBox";
            //   // isShowEcharts = 'none'
            // } else if (tr == "7") {
            //   poistionTop = "-276px";
            //   echartsClassName = "#newBox";
            //   // isShowEcharts = 'none'
            // } else if (tr == "8") {
            //   poistionTop = "-238px";
            //   echartsClassName = "#newBox";
            //   // isShowEcharts = 'none'
            // } else if (tr == "9") {
            //   poistionTop = "-200px";
            //   echartsClassName = "#newBox";
            //   // isShowEcharts = 'none'
            // }
            // var chartDom = document.getElementById(
            //   tr <= "5" ? "noneBox" : "newBox"
            // );
            var chartDom = document.getElementById("noneBox");
            $(td).append($(chartDom));
            $(chartDom).css({
              display: "block",
              position: "absolute",
              //   top: poistionTop,
              top: "100%",
              left: "7%",
            });
            function getNowTime(time) {
              var date = new Date(); //1. js获取当前时间
              var min = date.getMinutes(); //2. 获取当前分钟
              date.setMinutes(min - time); //3. 设置当前时间+5分钟：把当前分钟数+5后的值重新设置为date对象的分钟数
              var h =
                date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
              var f =
                date.getMinutes() < 10
                  ? "0" + date.getMinutes()
                  : date.getMinutes();
              var s =
                date.getSeconds() < 10
                  ? "0" + date.getSeconds()
                  : date.getSeconds();
              return h + ":" + f + ":" + s;
            }
            var newResData = [];
            let cjTime = [];
            console.log(res.data, "length");
            for (let i = 0; i < res.data.length; i++) {
              newResData.push(res.data[i].value);
              cjTime.push(res.data[i].cjTime);
            }
            console.log(newResData, cjTime, "newResData");
            newResData.reverse();

            var myChart = echarts.init(chartDom);
            var option;
            option = {
              tooltip: {
                trigger: "axis",
                boundaryGap: false,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["1-1", "1-2", "1-3", "1-4", "1-5"],
              },
              yAxis: {
                type: "value",
                min: 0,
                max: 50,
                splitLine: {
                  show: false,
                },
              },
              grid: {
                left: "15%",
                right: "10%",
                bottom: "10%",
                top: "10%",
              },
              visualMap: [
                {
                  type: "piecewise",
                  show: false,
                  dimension: 1,
                  seriesIndex: 0,
                  hoverLink: true,
                  pieces: [
                    {
                      // 不指定 min，表示 min 为无限大（-Infinity）。
                      max: 5, // 没有设置最小值，表明当前范围 [-Infinity, max] 变色
                      color: "red",
                    },
                    {
                      // 不指定 max，表示 max 为无限大（Infinity）。
                      min: 10, // 没有设置最大值，表明当前范围 [min, Infinity] 变色
                      color: "red",
                    },
                  ],
                  outOfRange: {
                    // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
                    color: "blue",
                  },
                },
              ],
              series: [
                {
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  lineStyle: {
                    // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
                    width: 3,
                  },
                  markLine: {
                    symbol: "none",
                    label: {
                      show: true,
                    },
                    data: [
                      {
                        yAxis: 5,
                      },
                      {
                        yAxis: 10,
                      },
                    ],
                  },
                  // areaStyle: {},
                  data: [2, 3, 4, 5,15],
                },
              ],
            };
            option && myChart.setOption(option);
            // window.rel
            // $(td).append($(chartDom));
            console.log(setTimeFlag, "鼠标移入停留触发");
            setTimeData = setInterval(() => {
              console.log(setTimeFlag, "间隔时间再次触发");
              let list = {
                sourceTag: td.attr("pointId"),
                params: {
                  beginTime: "",
                  endTime: "",
                },
              };
              $.ajax({
                url: `/youtian/scene-category/selectSourceTagHistoryListBySourceTag`,
                type: "post",
                dataType: "json",
                data: JSON.stringify(list),
                headers: { "Content-Type": "application/json" },
                success: function (res) {
                  console.log(res, "length2");
                  // setTimeFlag = false
                  if (res.data && res.data.length) {
                    option.series[0].data = [3, 45, 3, 45, 33];
                    option && myChart.setOption(option);
                  }
                },
              });
            }, 3000);
          } else {
            $(td).remove($(".tip_box"));
            $(td).append($(".tip_box"));
            // $(".tip_box").css({
            //   display: "block",
            //   position: "absolute",
            //   top: top,
            //   right: "770px",
            // });
            $(".tip_box").css({
              display: "block",
              position: "absolute",
              // top: poistionTop,
              top: "72%",
              left: "42%",
            });
          }
        },
      });
    }
    $(".table").on("mouseleave", "#noneBox", function () {
      $("#noneBox").css({
        display: "none",
      });
      $(".tip_box").css({
        display: "none",
      });
      // $('.alertText').css({
      //    'display':'none',
      // })
      // $("#newBox").css({
      //   display: "none",
      // });
      clearInterval(setTimeData);
      setTimeFlag = true;
    });
    $(".table").on(
      "mouseleave",
      ".layui-table-body .layui-table-cell",
      function () {
        $(".tip_box").css({
          display: "none",
        });
        // $('.alertText').css({
        //    'display':'none',
        // })
        // $("#newBox").css({
        //   display: "none",
        // });
      }
    );

    // $(".table #noneBox").hover(function () {
    //   // $('#noneBox').css('display', 'hide')
    //   var _con = $("#noneBox"); // 设置目标区域
    //   if (!_con.is(event.target) && _con.has(event.target).length === 0) {
    //     // Mark 1
    //     //$('#divTop').slideUp('slow');   //滑动消失
    //     $("#noneBox").hide(1000); //淡出消失
    //   }

    //   //   var index = $(this).index();
    //   //   $(this).addClass("gw_b_item2");
    //   //   $(this).siblings().removeClass("gw_b_item2");
    //   //   $("#noneBox").css({
    //   //     display: "none",
    //   //   });
    //   //   $(".tip_box").css({
    //   //     display: "none",
    //   //   });
    //   //   // $('.alertText').css({
    //   //   //     'display':'none',
    //   //   // })
    //   //   $("#newBox").css({
    //   //     display: "none",
    //   //   });
    //   clearInterval(setTimeData);
    //   setTimeFlag = true;
    // });
    // $(".table .layui-table-body .layui-table-cell").click(function () {
    //   var index = $(this).index();
    //   //   $(this).addClass("gw_b_item2");
    //   //   $(this).siblings().removeClass("gw_b_item2");
    //   $("#noneBox").eq(index).siblings().show();
    //   $(this).siblings().removeClass("gw_b_item2");
    //   $("#newBox").eq(index).siblings().show();
    //   $(this).siblings().removeClass("gw_b_item2");
    //   //   $("#noneBox").css({
    //   //     display: "none",
    //   //   });
    //   //   $(".tip_box").css({
    //   //     display: "none",
    //   //   });
    //   //   // $('.alertText').css({
    //   //   //     'display':'none',
    //   //   // })
    //   //   $("#newBox").css({
    //   //     display: "none",
    //   //   });
    //   clearInterval(setTimeData);
    //   setTimeFlag = true;
    // });
    // 合并行的单元个方法
    jQuery.fn.rowspan = function (colIdx) {
      return this.each(function () {
        var that;
        $("tr", this).each(function (trIndex, trItem) {
          $("td:eq(" + colIdx + ")", this)
            .filter(":visible")
            .each(function (tdIndex, tdItem) {
              if (that != null && $(tdItem).html() == $(that).html()) {
                var rowspan = $(that).attr("rowspan");
                if (rowspan == undefined) {
                  $(that).attr("rowspan", 1);
                  rowspan = $(that).attr("rowspan");
                }
                rowspan = Number(rowspan) + 1;
                $(that).attr("rowspan", rowspan);
                // console.log(`rowspan: ${rowspan}`);
                $(tdItem).hide();
              } else {
                that = tdItem;
              }
            });
        });
      });
    };
  </script>
</html>
